<template>
    <div class="right-bottom-container">
        <el-table :data="tableData" style="width: 100%; height: 100%" :header-cell-style="headerCellStyle"
            :row-style="rowStyle" :cell-style="cellStyle" stripe height="100%">
            <el-table-column prop="siteName" label="站点名" align="center" width="150" />
            <el-table-column prop="batteryCode" label="电池编号" align="center" />
            <el-table-column prop="cycleCount" label="循环次数" align="center" />
            <el-table-column prop="batteryLevel" label="电量" align="center">
                <template #default="{ row }">
                    <span :class="getBatteryClass(row.batteryLevel)">{{ row.batteryLevel }}%</span>
                </template>
            </el-table-column>
            <el-table-column prop="healthValue" label="健康值" align="center">
                <template #default="{ row }">
                    <span :class="getHealthClass(row.healthValue)">{{ row.healthValue }}%</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义表格数据类型
interface BatteryData {
    siteName: string
    batteryCode: string
    cycleCount: number
    batteryLevel: number
    healthValue: number
}

// 表格数据（按健康值降序排列）
const tableData = ref<BatteryData[]>([
    // { siteName: '渤海路商业广场', batteryCode: 'BAT004', cycleCount: 89, batteryLevel: 95, healthValue: 98 },
    // { siteName: '庆云县政务中心', batteryCode: 'BAT007', cycleCount: 234, batteryLevel: 88, healthValue: 94 },
    // { siteName: '中心街金宇商城', batteryCode: 'BAT001', cycleCount: 245, batteryLevel: 85, healthValue: 92 },
    // { siteName: '渤海路汽车站', batteryCode: 'BAT002', cycleCount: 678, batteryLevel: 72, healthValue: 88 },
    // { siteName: '庆云县人民医院', batteryCode: 'BAT006', cycleCount: 567, batteryLevel: 78, healthValue: 85 },
    // { siteName: '渤海路小学', batteryCode: 'BAT008', cycleCount: 890, batteryLevel: 65, healthValue: 78 },
    // { siteName: '庆云县体育中心', batteryCode: 'BAT003', cycleCount: 1205, batteryLevel: 45, healthValue: 65 },
    // { siteName: '渤海路工业园', batteryCode: 'BAT005', cycleCount: 1456, batteryLevel: 38, healthValue: 52 }
])

// 电量颜色判断
const getBatteryClass = (batteryLevel: number) => {
    if (batteryLevel >= 80) return 'batteryLevel-high'
    if (batteryLevel >= 50) return 'batteryLevel-medium'
    if (batteryLevel >= 20) return 'batteryLevel-low'
    return 'batteryLevel-critical'
}

// 健康值颜色判断
const getHealthClass = (healthValue: number) => {
    if (healthValue >= 80) return 'healthValue-high'
    if (healthValue >= 60) return 'healthValue-medium'
    if (healthValue >= 40) return 'healthValue-low'
    return 'healthValue-critical'
}

// 表格样式配置
const headerCellStyle = {
    background: 'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: '14px',
    borderBottom: '1px solid #3b82f6'
}

const rowStyle = {
    background: 'transparent'
}

const cellStyle = {
    background: 'transparent',
    color: '#e2e8f0',
    borderBottom: '1px solid rgba(59, 130, 246, 0.2)'
}

const init = (module: any) => {
  let data = JSON.parse(module)
  if (module) {
    tableData.value = data
  }
}

defineExpose({
  init
})
</script>

<style scoped>
.right-bottom-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* el-table 样式 */
:deep(.el-table) {
    background: transparent !important;
    border: none !important;
}

:deep(.el-table__header) {
    background: transparent !important;
}

:deep(.el-table__body) {
    background: transparent !important;
}

:deep(.el-table tr) {
    background: transparent !important;
}

:deep(.el-table tr:hover) {
    background: rgba(59, 130, 246, 0.1) !important;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: rgba(30, 41, 59, 0.3) !important;
}

:deep(.el-scrollbar__bar) {
    background: rgba(59, 130, 246, 0.2);
}

:deep(.el-scrollbar__thumb) {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 4px;
}

/* 电量状态样式 */
.batteryLevel-high {
    color: #4ade80;
    font-weight: bold;
}

.batteryLevel-medium {
    color: #fbbf24;
    font-weight: bold;
}

.batteryLevel-low {
    color: #fb923c;
    font-weight: bold;
}

.batteryLevel-critical {
    color: #ef4444;
    font-weight: bold;
}

/* 健康值状态样式 */
.healthValue-high {
    color: #4ade80;
    font-weight: bold;
}

.healthValue-medium {
    color: #fbbf24;
    font-weight: bold;
}

.healthValue-low {
    color: #fb923c;
    font-weight: bold;
}

.healthValue-critical {
    color: #ef4444;
    font-weight: bold;
}
</style>